<template>
  <Dialog
    :title="title"
    :model-value="visible"
    width="800px"
    max-height="600px"
    :before-close="closeForm"
  >
    <Form
      :schema="schema"
      :model="nodeMsg"
      @register="formRegister"
      :isCol="false"
      label-width="120px"
      :rules="rules"
    />
    <template #footer>
      <el-space>
        <BaseButton :loading="loading" type="primary" @click="save">确定</BaseButton>
        <BaseButton @click="resetForm">重置</BaseButton>
      </el-space>
    </template>
  </Dialog>
</template>

<script>
import { EnumDic, FlowMsgType, FlowMsgReceiveRange } from '@/flow/config/flowConfig'
import { HrItemDic } from '@/config/publicDic'
import * as nodeMsgApi from '@/flow/api/flowNodeMsg'
import { useUserStoreWithOut } from '@/store/modules/user'
import { Dialog } from '@/components/Dialog'
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { joinStr } from '@/utils/index'
const { formRegister, formMethods } = useForm()
const userStore = useUserStoreWithOut()
export default {
  components: {
    Dialog,
    Form
  },
  props: {
    nodeId: {
      type: String,
      default: null
    },
    flowId: {
      type: String,
      default: null
    },
    formId: {
      type: String,
      default: null
    },
    id: {
      type: String,
      default: null
    },
    nodes: {
      type: Array,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      EnumDic,
      HrItemDic,
      FlowMsgType,
      FlowMsgReceiveRange,
      source: null,
      nodeMsg: {
        MsgType: null,
        NodeId: null,
        ReceiveRange: null,
        EmpRange: 0,
        CompanyId: null,
        UnitId: null,
        Name: null,
        DeptId: null,
        TitleCode: null,
        PostCode: null,
        TableId: null,
        ColId: null,
        Keywords: null,
        ToNodeId: null,
        ToEmpId: null
      },
      title: null,
      schema: [],
      rules: {
        MsgType: [
          {
            required: true,
            message: '消息类型不能为空！',
            trigger: 'blur'
          }
        ],
        ReceiveRange: [
          {
            required: true,
            message: '发送范围不能为空！',
            trigger: 'blur'
          }
        ],
        ToNodeId: [
          {
            required: true,
            message: '节点不能为空！',
            trigger: 'blur'
          }
        ],
        ToEmpId: [
          {
            required: true,
            message: '接收人不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    formRegister,
    modeChange() {
      this.nodeMsg.EmpRange = 0
      this.nodeMsg.CompanyId = userStore.comId
      this.nodeMsg.UnitId = null
      this.nodeMsg.DeptId = null
      this.nodeMsg.Name = null
      this.nodeMsg.TitleCode = null
      this.nodeMsg.PostCode = null
      this.nodeMsg.TableId = null
      this.nodeMsg.ColId = null
      this.nodeMsg.Keywords = null
      this.nodeMsg.ToNodeId = null
      this.nodeMsg.ToEmpId = null
      formMethods.setValues(this.nodeMsg)
    },
    initScheme() {
      const list = [
        {
          field: 'MsgType',
          label: '消息类型',
          component: 'EnumItem',
          componentProps: {
            dicKey: EnumDic.FlowMsgType,
            placeholder: '消息类型',
            sysHead: 'flow'
          }
        },
        {
          field: 'ReceiveRange',
          label: '发送范围',
          component: 'RadioGroup',
          componentProps: {
            options: FlowMsgReceiveRange,
            placeholder: '发送范围',
            on: {
              change: (val) => {
                this.nodeMsg.ReceiveRange = val
                this.initScheme()
                this.modeChange()
              }
            }
          }
        }
      ]
      if (this.nodeMsg.ReceiveRange === 7) {
        list.push({
          field: 'ToNodeId',
          label: '指定节点',
          component: 'Select',
          componentProps: {
            props: {
              value: 'Id',
              label: 'NodeName'
            },
            options: this.nodes,
            clearable: true,
            placeholder: '指定节点'
          }
        })
      } else if (
        this.nodeMsg.ReceiveRange === 2 ||
        this.nodeMsg.ReceiveRange === 4 ||
        this.nodeMsg.ReceiveRange === 8
      ) {
        list.push({
          field: 'CompanyId',
          label: '限定公司',
          component: 'CompanySelect',
          componentProps: {
            clearable: true,
            placeholder: '限定公司',
            on: {
              change: (val, com) => {
                this.nodeMsg.CompanyId = val
                this.nodeMsg.Name = com.Name
                this.initScheme()
              }
            }
          }
        })
      }
      if (this.nodeMsg.ReceiveRange === 4) {
        list.push({
          field: 'UnitId',
          label: '限定单位',
          component: 'DeptSelect',
          componentProps: {
            companyId: this.nodeMsg.CompanyId,
            clearable: true,
            isUnit: true,
            placeholder: '限定单位',
            on: {
              change: (val, unit) => {
                this.nodeMsg.Name = unit ? unit.Name : null
              }
            }
          }
        })
      } else if (this.nodeMsg.ReceiveRange === 8) {
        list.push({
          field: 'DeptId',
          label: '限定部门',
          component: 'DeptSelect',
          componentProps: {
            companyId: this.nodeMsg.CompanyId,
            clearable: true,
            isChioseUnit: false,
            placeholder: '限定部门',
            on: {
              change: (val, unit) => {
                this.nodeMsg.Name = unit ? unit.Name : null
              }
            }
          }
        })
      } else if (this.nodeMsg.ReceiveRange === 5) {
        list.push({
          field: 'ColId',
          label: '选择表单字段',
          component: 'FormColChiose',
          componentProps: {
            companyId: this.nodeMsg.CompanyId,
            clearable: true,
            isUnit: true,
            placeholder: '限定单位',
            on: {
              change: (val, from) => {
                this.nodeMsg.Name = from ? from.Name : null
              }
            }
          }
        })
        list.push({
          field: 'Keywords',
          label: '筛选方案名',
          component: 'Input',
          componentProps: {
            clearable: true,
            placeholder: '配合字段使用的筛选方案'
          }
        })
      } else if (this.nodeMsg.ReceiveRange === 1) {
        list.push({
          field: 'ToEmpId',
          label: '接收人',
          component: 'EmpInput',
          componentProps: {
            isMultiple: true,
            placeholder: '接收人',
            on: {
              change: (val, emps) => {
                this.nodeMsg.Name = joinStr(emps, (item) => item.EmpName)
              }
            }
          }
        })
      }
      if (
        this.nodeMsg.ReceiveRange === 2 ||
        this.nodeMsg.ReceiveRange === 4 ||
        this.nodeMsg.ReceiveRange === 8
      ) {
        list.push({
          field: 'EmpRange',
          label: '人员范围',
          component: 'RadioGroup',
          componentProps: {
            options: [
              {
                value: 0,
                label: '全部'
              },
              {
                value: 1,
                label: '职务'
              },
              {
                value: 2,
                label: '岗位'
              },
              {
                value: 3,
                label: '负责人'
              }
            ],
            placeholder: '人员范围',
            on: {
              change: (val) => {
                this.nodeMsg.EmpRange = val
                this.initScheme()
              }
            }
          }
        })
        if (this.nodeMsg.EmpRange === 1) {
          list.push({
            field: 'TitleCode',
            label: '限定职务',
            component: 'DicItem',
            componentProps: {
              multiple: true,
              dicId: HrItemDic.title,
              placeholder: '选择职务',
              on: {
                change: (val, titles) => {
                  this.nodeMsg.Name = joinStr(titles, (item) => item.DicText)
                }
              }
            }
          })
        } else if (this.nodeMsg.EmpRange === 2) {
          list.push({
            field: 'PostCode',
            label: '限定岗位',
            component: 'TreeDicItem',
            componentProps: {
              multiple: true,
              dicId: HrItemDic.post,
              placeholder: '选择岗位',
              on: {
                change: (val, posts) => {
                  this.nodeMsg.Name = joinStr(posts, (item) => item.DicText)
                }
              }
            }
          })
        }
      } else if (this.nodeMsg.ReceiveRange === 16) {
        list.push({
          field: 'TitleCode',
          label: '限定职务',
          component: 'DicItem',
          componentProps: {
            multiple: true,
            dicId: HrItemDic.title,
            placeholder: '选择职务',
            on: {
              change: (val, titles) => {
                this.nodeMsg.Name = joinStr(titles, (item) => item.DicText)
              }
            }
          }
        })
      } else if (this.nodeMsg.ReceiveRange === 32) {
        list.push({
          field: 'PostCode',
          label: '限定岗位',
          component: 'TreeDicItem',
          componentProps: {
            multiple: true,
            dicId: HrItemDic.post,
            placeholder: '选择岗位',
            on: {
              change: (val, posts) => {
                this.nodeMsg.Name = joinStr(posts, (item) => item.DicText)
              }
            }
          }
        })
      }

      this.schema = list
    },
    resetForm() {
      if (this.source == null) {
        this.nodeMsg = {
          CompanyId: this.comId
        }
      } else {
        this.nodeMsg.MsgType = this.source.MsgType
        if (this.source.ReceiveRange % 2 === 1) {
          this.nodeMsg.ReceiveRange = this.source.ReceiveRange
          this.nodeMsg.EmpRange = 0
        } else if (this.source.ReceiveRange === 16 || this.source.ReceiveRange === 32) {
          this.nodeMsg.ReceiveRange = this.source.ReceiveRange
          this.nodeMsg.EmpRange = 0
        } else if ((64 & this.source.ReceiveRange) === 64) {
          this.nodeMsg.ReceiveRange = this.source.ReceiveRange - 64
          this.nodeMsg.EmpRange = 3
        } else if ((32 & this.source.ReceiveRange) === 32) {
          this.nodeMsg.ReceiveRange = this.source.ReceiveRange - 32
          this.nodeMsg.EmpRange = 2
        } else if ((16 & this.source.ReceiveRange) === 16) {
          this.nodeMsg.ReceiveRange = this.source.ReceiveRange - 16
          this.nodeMsg.EmpRange = 1
        } else {
          this.nodeMsg.ReceiveRange = this.source.ReceiveRange
          this.nodeMsg.EmpRange = 0
        }
        this.nodeMsg.CompanyId = this.source.CompanyId
        this.nodeMsg.UnitId = this.source.UnitId
        this.nodeMsg.DeptId = this.source.DeptId
        this.nodeMsg.TitleCode = this.source.TitleCode
        this.nodeMsg.PostCode = this.source.PostCode
        this.nodeMsg.TableId = this.source.TableId
        this.nodeMsg.ColId = this.source.ColId
        this.nodeMsg.Keywords = this.source.Keywords
        this.nodeMsg.ToNodeId = this.source.ToNodeId
        this.nodeMsg.ToEmpId = this.source.ToEmpId
      }
      this.formMethods.setValues(this.nodeMsg)
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    async reset() {
      if (this.id != null) {
        const res = await nodeMsgApi.Get(this.id)
        this.source = res
        this.title = '新增节点消息'
      } else {
        this.source = null
        this.title = '编辑节点消息'
      }
      this.resetForm()
      this.initScheme()
    },
    async set(val) {
      const data = this.format(val)
      const res = await nodeMsgApi.Set(this.id, data)
      this.$emit('update:visible', false)
      this.$emit('close', res)
    },
    async add(val) {
      const data = this.format(val)
      const res = await nodeMsgApi.Add(data)
      this.$emit('update:visible', false)
      this.$emit('close', res)
    },
    format(val) {
      const data = Object.assign({}, val)
      data.FlowId = this.flowId
      data.NodeId = this.nodeId
      if (
        this.nodeMsg.ReceiveRange === 2 ||
        this.nodeMsg.ReceiveRange === 4 ||
        this.nodeMsg.ReceiveRange === 8
      ) {
        data.ReceiveRange = this.nodeMsg.ReceiveRange + this.nodeMsg.EmpRange * 16
      }
      data.Show = this.formatShow(val)
      return data
    },
    formatShow(data) {
      if (this.nodeMsg.ReceiveRange === 1) {
        return '指定成员:' + this.nodeMsg.Name
      } else if (this.nodeMsg.ReceiveRange === 3) {
        return '流程发起人'
      } else if (this.nodeMsg.ReceiveRange === 7) {
        const nodes = this.nodes.filter((c) => data.ToNodeId.includes(c.Id))
        return '节点人员：' + joinStr(nodes, (a) => a.NodeName)
      } else if (this.nodeMsg.ReceiveRange === 5) {
        return '读取表单字段:' + this.nodeMsg.Name
      } else if (this.nodeMsg.ReceiveRange === 16) {
        return '限定职务:' + this.nodeMsg.Name
      } else if (this.nodeMsg.ReceiveRange === 32) {
        return '限定岗位:' + this.nodeMsg.Name
      } else {
        let show = ''
        if ((2 & this.nodeMsg.ReceiveRange) === 2) {
          show = '公司' + this.nodeMsg.Name
        } else if ((4 & this.nodeMsg.ReceiveRange) === 4) {
          show = '单位' + this.nodeMsg.Name
        } else if ((8 & this.nodeMsg.ReceiveRange) === 8) {
          show = '限定部门' + this.nodeMsg.Name
        }
        if ((16 & this.nodeMsg.ReceiveRange) === 16) {
          show = show + '和职务'
        } else if ((32 & this.nodeMsg.ReceiveRange) === 32) {
          show = show + '和岗位'
        } else if ((64 & this.nodeMsg.ReceiveRange) === 64) {
          show = show + '管理员'
        } else {
          show = show + '所有人'
        }
        return show
      }
    },
    async save() {
      const data = await formMethods.validate()
      if (data == null) {
        return
      } else if (this.id) {
        this.set(data)
      } else {
        this.add(data)
      }
    }
  }
}
</script>
<style scoped>
.el-checkbox-group {
  line-height: 40px;
}
.specifyMode .el-radio {
  line-height: 20px;
  width: 25%;
}
</style>
